/**
 * 文字滚动
 */

(function(win, doc) {
	const container = doc.querySelector(".gun"); // 容器元素
	const textNode = doc.querySelector(".gun > .text"); // 文字元素
	container.appendChild(textNode.cloneNode(true)); // 复制元素到后方
	const textWidth = textNode.offsetWidth; // 获取文字元素宽度
	let count = container.offsetWidth; // 初始化向左偏移为容器大小
	const loop = () => {
		if (count <= -textWidth) { // 如果文字偏移超出一个文字元素的宽度则复原
			textNode.style["margin-left"] = 0; // 复原
			count = 0; // 复原
		}
		textNode.style["margin-left"] = `${count--}px`; // 继续向左移动
		window.requestAnimationFrame(() => loop()); // 动画递归调用
	}
	window.requestAnimationFrame(() => loop()); // 启动动画
	// requestAnimationFrame当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，setInterval需要使用加入visibilitychange监听来清除与重设定时器
})(window, document);
